<template>
    <div id="Bq">
        <article class="article">
            <div class="banner">
                <!-- <router-link to=""></router-link> -->
                <a href="#" v-for="item, i in ListData" key="i">
                    <div class="list">
                        <div class="top">
                            <div class="left">
                                <img :src="item.resources[0].image.large" alt="">
                            </div>
                            <div class="right">
                                <div class="r1">
                                    <img :src="item.resources[1].image.large" alt="">
                                </div>
                                <div class="r2">
                                    <img :src="item.resources[2].image.large" alt="">
                                </div>
                            </div>
                        </div>
                        <h3 class="text">{{ item.name }}</h3>
                    </div>
                </a>
            </div>
        </article>
    </div>
</template>

<script setup>
import '@/assets/Bq.less';
import axios from 'axios';
import { ref, reactive } from 'vue'
const ListData = reactive([])
const ListChildrenData = reactive([])

getList()
async function getList() {
    const res = await axios('https://www.skypixel.com/api/v2/tag-groups/theme?lang=zh-Hans&platform=web&device=desktop&limit=9&offset=0')
    ListData.push(...res.data.data.items)
    ListData.forEach(item => {
        ListChildrenData.push(item.resources)
    });
}

</script>